import React ,{useState}from 'react'
import PubSub from 'pubsub-js'
import axios from 'axios'
//在搜索框输入时，需要拿到请求回来的数据给list展示，这是属于兄弟组件的通信，所以需要使用pubsub
//第一步：下载npm i pubsub-js ，再引入PubSub
//第二步：在头部组件中写ajax请求 ，下载axios 再引入axios
//第三步：获取input框中的value，并设置给state,并把state中的值拼接到请求路径中
//第四步：发布数据
//第五步：去list中订阅数据
//第六步：在list中初始化一个state，保存订阅回来的数据，当订阅回来以后,数据改变,视图重新渲染
//第七步：遍历数据，进行列表渲染,把数据传给Item组件
//第八步：在Item组件中接收数据，并将需要的数据渲染到对应的虚拟Dom中
//第九步：优化，想在用户为搜索之前，页面展示的是请搜索的提示信息，在点击搜索之后获得数据之前，展示的是正在搜索中的信息，搜索到数据之后，再展示数据

export default function Header() {
  //设置一个state 先把状态中的value值设置为空
  const [searchValue,setSearchValue] = useState('')
//给input绑定onchange事件，当有输入时，就获取输入的value值设置新的状态
  const changeSearchValue = (e)=>{
    setSearchValue(e.target.value)
  }
  const searchHandle = async()=>{
    //在请求到数据之前，给list中展示正在搜索中
    PubSub.publish('searchValue', { isInit: false, isSearch: true, data: [] })

      //await的值就是一个对象，对象中的data属性是github响应回来的数据
      //github响应回的数据是一个对象，对象中有一个items属性才是我们需要的每个用户的信息
      const result = await axios.get('https://api.github.com/search/users?q='+searchValue)
      //发布数据
      //查到数据之后，给list传数据
      PubSub.publish('searchValue',{ isInit: false, isSearch: false, data: result.data.items } )
      
  }
  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" value={searchValue} placeholder="enter the name you search" onChange={changeSearchValue}/>
        &nbsp;
        <button onClick={searchHandle}>Search</button>
      </div>
    </section>
  )
}
